<template>
	<div class="ebook-wrapper" ref="ebookWrapper">
		<ebook-title></ebook-title>
		<ebook-reader></ebook-reader>
		<ebook-settingFont></ebook-settingFont>
		<ebook-menu></ebook-menu>
		<ebook-settingFontPopup></ebook-settingFontPopup>
		<!-- 设置进度条 组件 -->
		<ebook-settingProgress></ebook-settingProgress>
		<!-- 设置电子书 侧边栏组件 -->
		<ebook-slide v-if="settingVisible === 3"></ebook-slide>
		<!-- 电子书书签 -->
		<ebook-bookmark :actualOffsetY="actualOffsetY"></ebook-bookmark>
	</div>
</template>

<script>
	import EbookTitle from '@/components/ebook/EbookTitle.vue';
	import EbookReader from '@/components/ebook/EbookReader.vue';
	import EbookMenu from '@/components/ebook/EbookMenu.vue';
	import EbookSettingFont  from '@/components/ebook/EbookSettingFont.vue';
	import EbookSettingFontPopup  from '@/components/ebook/EbookSettingFontPopup.vue';
	import EbookSettingProgress  from '@/components/ebook/EbookSettingProgress.vue';
	import EbookSlide  from '@/components/ebook/EbookSlide.vue';
	import EbookBookmark  from '@/components/ebook/EbookBookmark.vue';
	import { ebookMixin } from '@/utils/mixin.js';
	export default {
		name: 'Ebook',
		mixins:[ebookMixin],
		components:{
			EbookReader,
			EbookTitle,
			EbookMenu,
			EbookSettingFont,
			EbookSettingFontPopup,
			EbookSettingProgress,
			EbookSlide,
			EbookBookmark
		},
		watch: {
			offsetY(val,oldVal) {
				if(!this.bookAvailable) {
					return;
				}
				
				const maxOffsetY = 100 // 最大偏移值
				if(val > 0 && val > oldVal && this.actualOffsetY < maxOffsetY) {
					// 为了使下拉过程平滑
					this.actualOffsetY++;
					this.$refs.ebookWrapper.style.top = this.actualOffsetY + 'px'
				}else if(val === 0 && oldVal > 0) {
					this.$refs.ebookWrapper.style.transition = `all 0.2s ease-out`
					this.actualOffsetY = 0 
					this.timeout = setTimeout(()=> {
						this.$refs.ebookWrapper.style.transition = 'none'
						clearTimeout(this.timeout)
						this.setoffsetY({
							offsetY: undefined
						})
						// 因为transition 是 0.2s 所以200ms
					},200)
					
					this.$refs.ebookWrapper.style.top = '0px'
				}
			}
		},
		data() {
			return {
				actualOffsetY: 0
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';
	.ebook-wrapper {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}

</style>
